<template>
  <div class="app-container">
    <div class="config-card">
      <div class="card-header">
        <i class="el-icon-setting"></i>
        <span>视觉大模型配置</span>
      </div>
      <div class="card-content">
        <el-form ref="form" :model="form" label-width="0">
          <el-divider content-position="left">
            <span class="divider-title">归档章</span>
          </el-divider>
          
          <el-form-item>
            <div class="extraction-method">
              <el-radio-group v-model="form.jh" size="medium">
                <el-radio label="1">按文件夹名称提取</el-radio>
                <el-radio label="2">按视觉大模型提取</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          
          <el-divider content-position="left">
            <span class="divider-title">视觉大模型自动标引基础提示词</span>
          </el-divider>
          
          <el-form-item>
            <el-input 
              v-model="form.tsc" 
              type="textarea" 
              :autosize="{ minRows: 15, maxRows: 15}"
              placeholder="请输入提示词，用于指导视觉大模型进行自动标引..."
              class="prompt-textarea" 
            />
            <div class="tips">
              <i class="el-icon-info"></i>
              <span>提示词会影响模型对图像的理解和标引质量，建议使用清晰、明确的描述</span>
            </div>
          </el-form-item>
          
          <el-form-item class="form-actions">
            <el-button type="primary" icon="el-icon-check" @click="onSubmit">保存配置</el-button>
            <el-button icon="el-icon-refresh-right" @click="getVlConfig">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { artApi } from '@/api/art'

export default {
  data() {
    return {
      form: {
        jh: "1",
        tsc: '',

      }
    }
  },

  mounted() {
    this.getVlConfig()
  },
  methods: {
    async getVlConfig() {
      const response = await artApi("getVlConfig", {})

      if (response.code == 200) {
        this.form.jh = response.data.jh
        this.form.tsc = response.data.tsc
        if (response.data.extractionMethod) {
          this.form.extractionMethod = response.data.extractionMethod
        }
      }
    },
    async onSubmit() {
      const response = await artApi("SaveVlConfig", this.form)

      if (response.code == 200) {
        this.$message.success(response.message)
      }
      this.loading = false
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.config-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  background-color: #409EFF;
  color: white;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 10px;
    font-size: 22px;
  }
}

.card-content {
  padding: 24px;
}

.divider-title {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.prompt-textarea {
  border-radius: 6px;
  
  ::v-deep .el-textarea__inner {
    padding: 15px;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    color: #303133;
    background-color: #fafbfc;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
    
    &:hover, &:focus {
      border-color: #409EFF;
      background-color: #fff;
    }
  }
}

.tips {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #ecf8ff;
  border-radius: 4px;
  color: #409EFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 8px;
    font-size: 16px;
  }
}

.form-actions {
  margin-top: 20px;
  text-align: right;
  
  .el-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}

.extraction-method {
  margin: 15px 0;
}

.extraction-method .el-radio {
  margin-right: 30px;
  font-size: 14px;
}

.extraction-method .el-radio-group {
  display: flex;
  align-items: center;
}
</style>
